<template>
  <uni-popup
    ref="popup"
    background-color="#fff"
    type="bottom"
    @close="clearPop"
    @maskClick="clearPop"
  >
    <view class="number-keyboard" @click.stop="">
      <view class="number_head_num">{{ newNum || '0.0' }}</view>
      <view class="keyboard_box">
        <view style="display: flex">
          <view class="keyboard">
            <view
              class="button"
              v-for="(item, index) in numbers"
              :key="index"
              @click.stop="appendInput(item)"
              >{{ item }}</view
            >
          </view>
          <view>
            <view @click.stop="delInput" class="delete-btn">
              <image src="@/static/imgs/delete.png"></image>
            </view>
            <view class="clear_btn" @click.stop="clearInput">全部清除</view>
            <view class="save_btn" @click.stop="saveInput">保存</view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
/**
 *
 *
 * NavBar 自定义弹窗
 * @event {newNum} num 数量
 * @event {Function} saveInput 保存
 *
 * @example <h-num-keyboard :num="mealNum" :unit="addDetail?.unit" @bind="bindNum"></h-num-keyboard>
 */
import { nextTick, ref, watch } from 'vue'
const numbers = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, '.'])
const props = defineProps({
  num: {
    type: String,
  },
  show: {
    type: Boolean,
  },
})
const newNum = ref('')
const popup = ref(null)
watch(
  () => props.show,
  (newVal, oldVal) => {
    nextTick(() => {
      if (props.show) {
        popup.value.open()
      } else {
        popup.value.close()
      }
      newNum.value = props.num
    })
  },
  {
    immediate: true,
  },
)
const emit = defineEmits(['bind', 'clear'])


function appendInput(val) {
  // 将每次按键的值拼接到value变量中，注意+=写法
  var arr = newNum.value.split('')
  if (arr.length > 0) {
    var num = 0
    var l = []
    for (var i in arr) {
      if (arr[i] == '.') {
        num++
        l = newNum.value.split('.')
      }
    }
    if (num > 0) {
      if (num !== '.') {
        if (l[1].length < 2) {
          newNum.value += val
        }
      }
    } else {
      newNum.value += val
    }
  } else {
    if (val != '0' && val != '.') {
      newNum.value += val
    }
  }
}

function delInput() {
  // 删除value的最后一个字符
  if (newNum.value.length) {
    newNum.value = newNum.value.substr(0, newNum.value.length - 1)
  }
}

function clearInput() {
  newNum.value = ''
}

function saveInput() {
  emit('bind', newNum.value)
}
function clearPop() {
  emit('clear')
}
</script>

<style lang="scss" scoped>
.number_head_num {
  margin: 0 auto;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 61rpx;
  color: #202020;
  line-height: 125rpx;
  text-align: center;
}

.keyboard_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f6f6;
  padding: 20rpx 0;
}

.keyboard {
  display: grid;
  grid-template-columns: repeat(3, 160rpx);
  grid-gap: 10px;
}

.button,
.delete-btn,
.clear_btn {
  width: 160rpx;
  height: 71rpx;
  font-weight: 500;
  font-size: 47rpx;
  color: #000000;
  background: #ffffff;
  border-radius: 6rpx 6rpx 6rpx 6rpx;
  text-align: center;
  line-height: 71rpx;
  border: none;
}

.decimal-btn {
  grid-column: span 1;
}

.delete-btn {
  margin-left: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  image {
    width: 68rpx;
    height: 33rpx;
  }
}

.clear_btn {
  font-size: 20rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
}

.save_btn {
  width: 160rpx;
  height: 162rpx;
  background:#00C1B9;
  border-radius: 6rpx 6rpx 6rpx 6rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
  font-size: 32rpx;
  color: #ffffff;
  text-align: center;
  line-height: 162rpx;
}
</style>
